<template>
  <h1>级联选择器</h1>
  <e-divider class="title">单选-基本使用</e-divider>
  <div style="width: 400px">
    <span class="tip">您选择的value有：{{ values }}</span>
    <e-cascader :data="data" v-model="values"></e-cascader>
  </div>
  <e-divider class="title">单选-hover触发</e-divider>
  <div style="width: 400px">
    <span class="tip">您选择的value有：{{ value1 }}</span>
    <e-cascader :data="data" v-model="value1" trigger="hover"></e-cascader>
  </div>
  <e-divider class="title">单选-自定义已选项</e-divider>
  <div style="width: 400px">
    <span class="tip">您选择的value有：{{ value2 }}</span>
    <e-cascader
      :data="formatData"
      v-model="value2"
      :render-format="format"
    ></e-cascader>
  </div>
  <e-divider class="title">多选-基本使用</e-divider>
  <div style="width: 400px" key="a">
    <span class="tip">您选择的value有：{{ value3 }}</span>
    <e-mul-cascader
      clearable
      v-model="value3"
      :options="cityList1"
      @on-change-object="onChange"
    >
    </e-mul-cascader>
  </div>
  <e-divider class="title">多选-显示所有选项</e-divider>
  <div style="width: 400px" key="b">
    <span class="tip">您选择的value有：{{ value4 }}</span>
    <e-mul-cascader
      clearable
      v-model="value4"
      :options="cityList3"
      @on-change-object="onChange"
      show-checked-strategy="SHOW_ALL"
    >
    </e-mul-cascader>
  </div>
  <e-divider class="title">多选-合并选择项</e-divider>
  <div style="width: 400px" key="c">
    <span class="tip">您选择的value有：{{ value5 }}</span>
    <e-mul-cascader
      clearable
      v-model="value5"
      :options="cityList2"
      @on-change-object="onChange"
      show-checked-strategy="SHOW_PARENT"
    >
    </e-mul-cascader>
  </div>
  <e-divider class="title">多选-设置最多显示的 tag 数量</e-divider>
  <div style="width: 400px" key="c">
    <span class="tip">您选择的value有：{{ value6 }}</span>
    <e-mul-cascader
      clearable
      v-model="value6"
      :limited="3"
      :options="cityList4"
      @on-change-object="onChange"
    >
    </e-mul-cascader>
  </div>
  <mark-down class="markdown-body"></mark-down>
</template>
<script>
import MarkDown from '../../docs/cascader.md';
const mock = [
  {
    value: 'jiangsu',
    label: '江苏',
    children: [
      {
        value: 'suzhou',
        label: '苏州',
        children: [
          {
            value: 'gaoxinqu',
            label: '高新区',
            children: [
              {
                value: 'dongzhu',
                label: '东渚',
              },
              {
                value: 'tongan',
                label: '通安',
              },
              {
                value: 'xuguan',
                label: '浒关',
              },
              {
                value: 'zhenhu',
                label: '镇湖',
              },
              {
                value: 'majian',
                label: '马涧',
              },
              {
                value: 'kejicheng',
                label: '科技城',
              },
              {
                value: 'hengtang',
                label: '横塘',
              },
              {
                value: 'shishan',
                label: '狮山',
              },
              {
                value: 'fengqiao',
                label: '枫桥',
              },
            ],
          },
          {
            value: 'wuzhongqu',
            label: '吴中区',
          },
          {
            value: 'gusuqu',
            label: '姑苏区',
          },
        ],
      },
      {
        value: 'wuxi',
        label: '无锡',
      },
    ],
  },
  {
    value: 'guizhou',
    label: '贵州',
    children: [
      {
        value: 'guiyang',
        label: '贵阳',
      },
      {
        value: 'tongren',
        label: '铜仁',
      },
      {
        value: 'kaili',
        label: '凯里',
      },
    ],
  },
  {
    value: 'zhejiang',
    label: '浙江',
    children: [
      {
        value: 'hangzhou',
        label: '杭州',
      },
      {
        value: 'wenzhou',
        label: '温州',
      },
      {
        value: 'anji',
        label: '安吉',
      },
    ],
  },
  // 验证空目录
  {
    value: 'taiwan',
    label: '台湾',
    children: [],
  },
]
export default {
  components: {
    MarkDown,
  },
  data() {
    return {
      values: [],
      value1: ["jiangsu", "suzhou", "shizilin"],
      value2: [],
      value3: [],
      value4: [],
      value5: [],
      // value6: [],
      value6: ["taiwan", "zhejiang/wenzhou", "guizhou/tongren", "guizhou/kaili"],
      // value6: ["zhejiang/wenzhou", "guizhou/tongren"],
      // value6: ["zhejiang/wenzhou", "guizhou/tongren", "guizhou/kaili"],
      data: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'gugong',
              label: '故宫',
            },
            {
              value: 'tiantan',
              label: '天坛',
            },
            {
              value: 'wangfujing',
              label: '王府井',
            },
          ],
        },
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'fuzimiao',
                  label: '夫子庙',
                },
              ],
            },
            {
              value: 'suzhou',
              label: '苏州',
              children: [
                {
                  value: 'zhuozhengyuan',
                  label: '拙政园',
                },
                {
                  value: 'shizilin',
                  label: '狮子林',
                },
              ],
            },
          ],
        },
      ],
      formatData: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                {
                  value: 'xihu',
                  label: '西湖',
                  code: 310000,
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'zhonghuamen',
                  label: '中华门',
                  code: 210000,
                },
              ],
            },
          ],
        },
      ],
      cityList1: JSON.parse(JSON.stringify(mock)),
      cityList2: JSON.parse(JSON.stringify(mock)),
      cityList3: JSON.parse(JSON.stringify(mock)),
      cityList4: JSON.parse(JSON.stringify(mock)),
    }
  },
  watch: {
    value6(val) {
      // console.log("value6", val);
    }
  },
  methods: {
    format(labels, selectedData) {
      // console.log(labels, selectedData)
      const index = labels.length - 1
      const data = selectedData[index] || false
      if (data && data.code) {
        return labels[index] + ' - ' + data.code
      }
      return labels[index]
    },
    onChange(option) {
      // this.$Message.info(JSON.stringify(option))
      console.log(JSON.stringify(option))
    },
  },
  mounted () {
    // setTimeout(() => (this.values = ['jiangsu/suzhou']), 1000)
    // setTimeout(() => (this.value6 = ['guizhou', 'taiwan']), 1000)
  },
  
}
</script>
<style lang="less" scoped>
.title {
  display: block;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  line-height: 1.5;
  &:not(:first-child) {
    margin-top: 40px;
  }
}
.tip {
  color: #888;
  display: block;
  margin-bottom: 10px;
}
.markdown-body {
  margin-top: 40px;
}
</style>
